---
title: Vue
---

<Callout>
  如果你正在寻找使用 Vue 组件作为自定义组件的方法，请参阅[此处](/guides/docs/ui/components#vue)。
</Callout>

## Vue 3.x

### 集成前须知

- 应避免对 Univer 和 FUniver 的实例进行代理，否则可能会引起不可预知的错误或性能问题。

### 集成步骤

1. 在 `onMounted` 钩子中初始化 Univer
2. 在 `onBeforeUnmount` 钩子中销毁 Univer

### 示例代码

```vue
<script lang="ts" setup>
import type { FUniver, Univer } from '@univerjs/presets'
import { UniverDocsCorePreset } from '@univerjs/preset-docs-core'
import UniverPresetDocsCoreZhCN from '@univerjs/preset-docs-core/locales/zh-CN'
import { createUniver, LocaleType, mergeLocales } from '@univerjs/presets'
import { onBeforeUnmount, onMounted, ref } from 'vue'

import '@univerjs/preset-docs-core/lib/index.css'

const container = ref<HTMLElement | null>(null)

let univerInstance: Univer | null = null
let univerAPIInstance: FUniver | null = null

onMounted(() => {
  const { univer, univerAPI } = createUniver({
    locale: LocaleType.ZH_CN,
    locales: {
      [LocaleType.ZH_CN]: mergeLocales(
        UniverPresetDocsCoreZhCN,
      ),
    },
    presets: [
      UniverDocsCorePreset({
        container: container.value as HTMLElement,
      }),
    ],
  })

  univerAPI.createUniverDoc({})

  univerInstance = univer
  univerAPIInstance = univerAPI
})

onBeforeUnmount(() => {
  univerInstance?.dispose()
  univerAPIInstance?.dispose()
  univerInstance = null
  univerAPIInstance = null
})
</script>

<template>
  <div ref="container" />
</template>
```

## Vue 2.x

### 集成前须知

- 使用 pnpm 安装 `@univerjs/presets` 时，可能会出现需要手动安装 react 和 react-dom 的情况。
- 如果在开发环境中遇到了 ResizeObserver loop limit exceeded 警告，可以忽略它，也可以参考下面的代码片段解决：

```typescript
if (process.env.NODE_ENV === 'development') {
  const _ResizeObserver = window.ResizeObserver
  function debounce(fn, delay) {
    let timer = null
    return function () {
      if (timer) {
        clearTimeout(timer)
      }
      timer = setTimeout(() => {
        fn.apply(this, arguments)
      }, delay)
    }
  }
  window.ResizeObserver = class ResizeObserver extends _ResizeObserver {
    constructor(callback) {
      callback = debounce(callback, 50)
      super(callback)
    }
  }
}
```

### 集成步骤

1. 在 `mounted` 钩子中初始化 Univer
2. 在 `beforeDestroy` 钩子中销毁 Univer

### 示例代码

```vue
<script>
import { UniverDocsCorePreset } from '@univerjs/preset-docs-core'
import UniverPresetDocsCoreZhCN from '@univerjs/preset-docs-core/locales/zh-CN'
import { createUniver, LocaleType, mergeLocales } from '@univerjs/presets'

import '@univerjs/preset-docs-core/lib/index.css'

export default {
  mounted() {
    const { univer, univerAPI } = createUniver({
      locale: LocaleType.ZH_CN,
      locales: {
        [LocaleType.ZH_CN]: mergeLocales(
          UniverPresetDocsCoreZhCN,
        ),
      },
      presets: [
        UniverDocsCorePreset({
          container: this.$refs.container,
        }),
      ],
    })

    univerAPI.createUniverDoc({})

    this.univerInstance = univer
    this.univerAPIInstance = univerAPI
  },
  beforeUnmount() {
    this.univerInstance?.dispose()
    this.univerAPIInstance?.dispose()
    this.univerInstance = null
    this.univerAPIInstance = null
  },
}
</script>

<template>
  <div ref="container" />
</template>
```
